<template>
  <div>
    <el-table v-loading="loading"
              :highlight-current-row="highlightCurrentRow"
              :data="list"
              :border="border"
              :stripe="stripe"
              @current-change="handleCurrentChange"
              @selection-change="handleSelectionChange">
      <el-table-column v-if="hasOrderNumber" label="序号" align="center" type="index"/>
      <el-table-column v-if="!headerIgnores.includes(item)"
                       v-for="(item,index) in headers"
                       :key="index"
                       :label="getHeaderName(item)"
                       align="center"
                       :prop="item">
        <template slot-scope="scope">
          <image-preview v-if="headers[index]==='avatar'" :src="scope.row.avatar" :width="50" :height="50"/>
          <div class="cell" v-else>
            {{dispatchCellHandle(headers[index],scope.row[headers[index]],scope.row)}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" v-if="actions && headers && headers.length>0">
        <template slot-scope="scope">
          <span v-for="action in actions">
            <el-tooltip v-if="action.hint" :content="action.hint" placement="top">
              <el-button
                size="mini"
                style="margin-right: 10px"
                circle :type="action.type"
                :icon="action.icon"
                @click="action.click(scope.row)"/>
            </el-tooltip>
            <el-button
              v-else
              size="mini"
              style="margin-right: 10px"
              circle :type="action.type"
              :icon="action.icon"
              @click="action.click(scope.row)"/>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-if="total !== undefined"
      v-show="total>0"
      :total="total"
      :page="1"
      :limit="limit"
      @pagination="pagination"/>
  </div>
</template>

<script>
export default {
  name: "ApiTable",
  props: {
    hasOrderNumber: {
      type: Boolean,
      default: false
    },
    ignoreEmptyValue: {
      type: Boolean,
      default: false
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: [Number,String],
      default: '---'
    },
    api: {
      type: Function,
      default: null,
      require: false
    },
    res: {
      type: Object
    },
    cellHandle: {
      type: Function,
      default: (key,value)=>value,
    },
    mustCellHandle: {
      type: Boolean,
      default: false
    },
    items: {
      type: Array
    },
    actions: {
      type: Array
    },
    params: {
      type: [Number,String,Object]
    },
    initLimit: {
      type: Number,
      default: 10
    },
    pageChange: {
      type: Function
    },
    currentChange: {
      type: Function
    },
    headerNames: {
      type: Array,
      default: ()=>[]
    },
    headerIgnores: {
      type: Array,
      default: ()=>[]
    },
    headerMappings: {
      type: Object,
      default: ()=>{}
    },
    resultHandle: {
      type: Function
    },
    border: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      limit: 10,
      headers: [],
      list: [],
      headerMapping: {
        avatar : "头像",
        name : "名称",
        memberLevelName : "会员等级"
      },
    }
  },
  created() {
    this.headerMapping = Object.assign({},this.headerMapping,this.headerMappings);
    this.limit = this.initLimit;
    this.getList();
  },
  watch: {
    res(){
      this.getList();
    },
    items(){
      this.getList();
    }
  },
  methods: {
    dispatchCellHandle(headName,cellValue,row){
      if(!this.mustCellHandle){
        if(cellValue === undefined || cellValue === null || (this.ignoreEmptyValue ? cellValue.trim() === '' : false)){
          return this.defaultValue;
        }
      }
      cellValue = this.cellHandle(headName,cellValue,row);
      return cellValue === undefined || cellValue === null || (this.ignoreEmptyValue ? cellValue.trim() === '' : false)
        ? this.defaultValue
        : cellValue;
    },
    pagination(pageParams) {
      console.log("pagination",pageParams);
      if(this.pageChange){
        this.pageChange(pageParams.page,pageParams.limit);
      }
    },
    getHeaderName(name){
      let headerName = this.headerMapping[name];
      if(!headerName){
        headerName = name;
      }
      return headerName;
    },
    initHeaders() {
      if(this.headerNames && this.headerNames.length > 0){
        this.headers = this.headerNames;
      }else if(this.list && this.list.length > 0){
        this.headers = Object.keys(this.list[0])
      }
    },
    getList() {
      this.loading = true;

      let callback = res=>{
        let data;
        if(this.resultHandle){
          this.list = this.resultHandle(res);
          data = res;
        }else if(res.hasOwnProperty('data')){
          data = res.data;
          this.list = data.hasOwnProperty('list') ? data.list : data;
        }else {
          console.error("ApiTable: api返回数据格式错误");
          return;
        }
        this.total = data.hasOwnProperty('total') ? data.total : undefined;
        this.initHeaders();
        this.loading = false;
      }
      if(this.res){
        callback(this.res);
      }else if(this.items){
        this.list = this.items;
        this.initHeaders();
        this.loading = false;
      }else if(this.api){
        if(this.params){
          this.api(this.params).then(callback);
        }else{
          this.api().then(callback);
        }
      }
    },
    handleCurrentChange(currentRow){
      if(this.currentChange){
        this.currentChange(currentRow);
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.memberId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
  },
}
</script>
